<template>
    <div class="footerBody">
        <div class="footerList">
            <div class="listItem leftItem">
                <div class="title">{{t('message.product')}}</div>
                <div class="itemRowBox">
                    <!--如果想要spider爬取该网页，那么这里的href需要配置页面-->
                    <a href="" v-for="(item,index) in productTypes" :key="index" @click="toProduct(item)">
                      {{item.name=='玻璃钢冷却塔'?t('productCat.lengqueta'):
                      item.name=='玻璃钢化粪池'?t('productCat.huafenchi'):
                      item.name=='玻璃钢管道'?t('productCat.guandao'):
                      item.name=='玻璃钢电缆管'?t('productCat.dianlanguan'):
                      item.name=='标志桩'?t('productCat.biaozhizhuang'):
                      item.name=='警示牌'?t('productCat.jinshipai'):
                      item.name=='玻璃钢净化塔'?t('productCat.jinhuata'):
                      item.name=='格栅'?t('productCat.geshan'):
                      item.name=='拉挤型材'?t('productCat.xingcai'):
                      item.name=='风机'?t('productCat.fengji'):item.name}}</a>
                </div>
            </div>
    
            <div class="listItem middleItem">
                <div class="title">{{ t('message.link') }}</div>
                <div class="itemColumnBox">
                    <a href="http://www.boligang888.com">{{t('message.cooperative')}}：{{'天新玻璃钢厂'}}</a>
                </div>
            </div>
    
            <div class="listItem rightItem">
                <div class="title">{{ t('message.followUs') }}</div>
                <div class="itemImageBox">
                    <div class="imagebox" v-for="(item,index) in linkList" :key="index">
                      <span v-if="language.name=='zh-cn' && item.name" class="verticalFont">
                        {{item.name}}</span>
                      

                      <el-image v-if="item.logo" :alt="(item.name || '')+'-'+'新盛合环保设备'"
                          :fit="'contain'"
                          :src="item.logo?item.logo:defaultImageSrc"
                          :preview-src-list="linkCode"
                          :initial-index="index" :hide-on-click-modal="true">
                      </el-image>

                      <div v-if="language.name=='en' && item.name" class="verticalEn">
                        {{item.name=='微信公众号'?t('message.wechatCode'):(item.name=='抖音账号'?t('message.douyinCode'):t('message.toutiaoCode'))}}</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="footerLine"></div>

        <div class="footerBottom">
          <img class="footerIcon" :src="copyImage"/>
          <div class="footerText"><a class="linkFooter" :title="'新ICP备2024009118号'" @click="openBA()">新ICP备2024009118号</a>
            © 2024 新疆新盛合环保设备有限公司 版权所有
          </div>
        </div>
    
    </div>
</template>
<script setup lang="ts">
//全局调用$message
const { proxy }: any = getCurrentInstance()
import api from '@/api/index'
import { getCurrentInstance, ref,reactive,watch } from 'vue';
//assets文件读取
import {fileTrans} from '@/utils/fileTrans.ts'
//引入国际化
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

//引入router跳转
import {useRouter} from 'vue-router';
const router=useRouter()


let productTypes: any = ref([])
const getProductTypes = () => {
    proxy.$loading()
    api.getProductType({}).then((res: any) => {
        console.log("分类响应：", res)
        if (res.success) {
            productTypes.value = res.responseData
        } else {
            proxy.$message.error('数据获取失败，请联系客服！')

        }
        console.log("分类：", productTypes)
        proxy.$loading().close()
    })
}

let linkList: any = ref([])
let linkCode: any = ref([])
const getlinkList = () => {
    proxy.$loading()
    api.getFriendLink({}).then((res: any) => {
        console.log("友情链接响应：", res)
        if (res.success) {
          if(res.responseData){
            linkList.value = res.responseData
            res.responseData.map((item: { logo: any; })=>{
              if(item.logo){
                linkCode.value.push(item.logo)
              }
            })
          }
            
            
            console.log("友情链接：", linkList)
        } else {
            proxy.$message.error('数据获取失败，请联系客服！')

        }
        proxy.$loading().close()
    })
}

const defaultImageSrc= fileTrans.getAsssetsFile('header/wechat-code-300-300.png')
const copyImage=fileTrans.getAsssetsFile('footer/net_safe.png')
const openBA=()=>{
  window.open(
      "https://beian.miit.gov.cn",
      '_blank',
      'width=800,height=800,toolbar=no,scrollbars=no,menubar=no,screenX=240,screenY=100'
  )
}

//跳转产品
function toProduct(item:any){
  console.log("去产品页：",item)
  router.push({
    path: '/product/list',
    // query: {
    //   id: item.id
    // }
  })
}

//监听
const props = defineProps({
    language: {
        type: String,
        default: 'zh-cn'
    }
})
watch(() => proxy.language, (newVal, oldVal) => {
    console.log("newVal", newVal)
    console.log("oldVal", oldVal)
    console.log("languag",props.language)
    
},{ immediate: true, deep: true })

getProductTypes()
getlinkList()
</script>
<style lang="scss" scoped>
@import '../assets/sass/index.scss';
@import '@/assets/sass/common.scss';
.footerBody {
    width: 100%;
    background-color: #eee;
    font-size: 16px; //引入全局宽度
    @include mainBody;
    // padding: 30px 30% 30px 15%;
    .footerList {
        padding: 30px 0 10px 0;
        width: 100%;
        display: flex;
        .leftItem {
            width: 33%;
            margin-left: 240px;
        }
        .middleItem {
            width: 12%;
        }
        .rightItem {
            max-width: 45%;
        }
        .listItem {
            display: flex;
            flex-direction: column;
            .title {
                width: 100%;
                display: flex;
                justify-content: flex-start;
                font-size: 20px;
                margin-bottom: 20px;
                color: #999999;
            }
            .itemRowBox {
                // width: 100%;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                color: #666;
                cursor: pointer;
                a {
                    color: #666;
                    text-decoration: none;
                    margin-bottom: 10px;
                    font-size: 16px;
                    margin-right: 20px;
                    margin-bottom: 10px;
                    &:hover {
                        text-decoration: underline;
                        color: $blue;
                    }
                }
            }
            .itemColumnBox {
              display: flex;
              flex-direction: column;
              align-content: center;
              text-align: left;
              color: #666;
              cursor: pointer;
              a {
                  color: #666;
                  text-decoration: none;
                  margin-bottom: 10px;
                  font-size: 16px;
                  margin-bottom: 10px;
                  &:hover {
                      text-decoration: underline;
                      color: $blue;
                  }
              }
            }
            .itemImageBox {
              display: flex;
              align-content: center;
              text-align: left;
              color: #666;
              cursor: pointer;
              .imagebox{
                display: flex;
                width: 170px;
                margin-right: 10px;
                // height: 170px;
                .verticalFont{
                  width: 20px;
                  // line-height: 40px;
                  -webkit-writing-mode: vertical-rl;
                  writing-mode: vertical-rl;
                  float: left;
                  margin-right: 5px;
                }
                .verticalEn{
                  display: table;
                  width: 20px;
                  // line-height: 40px;
                  // writing-mode: vertical-rl;
                  // transform: rotate(180deg);
                  float: left;
                  margin-right: 5px;
                }
              }
            }
        }
    }
    .footerLine {
      display: inline-block;
      width: 100%;
      height: 2px;
      color: white;
      border-bottom: 1px solid #bbb;
      background-color: unset;
    }
    .footerBottom{
      color: #9d9d9d;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-top: 10px;
      padding-bottom: 20px;
      .footerIcon {
        width: 20px;
        margin-right: 8px;
      }

      .linkFooter {
        color: #555454;
        font-size: 14px;
        cursor: pointer;
      }
    }
}
</style>